
<!--Created by levy on 16/5/1.
--><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>h5存储</title>
    <style>
    </style>
  </head>
  <body>
    <div id="local-data">here show the local storage data</div>
		<div>
      <button id="local-btn">本地存储</button>
		</div>
		<div>
		  <button id="clear">clear</button>
		</div>
		<p>localStorage针对浏览器的, sessionStorage针对标签页的. 都可以通过.操作符来get/set, 就像普通js对象一样</p>
    <script>
			(function() {
			var localData = document.getElementById('local-data')

		//	var store = localStorage
		//	if (!store.counter) store.counter = 0
		//	else
			  localData.innerHTML = 'current local storage data: ' + (localStorage.getItem('counter') || 0)
			  
			document.getElementById('local-btn').addEventListener('click', function() {
				var count = localStorage.counter || 0
				localData.innerHTML = ++count
				localStorage.setItem('counter', count)
			})

			document.getElementById('clear').addEventListener('click', function(){
			  localStorage.clear()
			})
			
			// onstorage 事件是由同源情况下, 别的窗口接收的

			}())

		</script>
  </body>
</html>
